<template>
	<view class="news">
		<up-tabs :list="tabList" @click="clickTab" :scrollable="false" lineWidth="100px" itemStyle="height:50px;"
			activeStyle="color:rgb(0,122,255);fontSize:18px" inactiveStyle="color:#888;fontSize:18px">
		</up-tabs>
		<view v-show="activateTab === 'news'" class="news_list_part">
			<view class="news_list_head">
				<view>全部消息设为已读</view>
			</view>
			<view class="news_list">
				<view v-for="item in newsItemList" :key="item.img" class="news_list_item"
					@click="() => toNewsDetail(item.value)">
					<view class="icon_part">
						<view>
							<image :src="item.img"></image>
						</view>
					</view>
					<view class="content_part">
						<view class="title">
							{{ item.title }}
						</view>
						<view class="content">
							<view class="no_data">暂无消息</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="activateTab === 'todo'" class="todo">
			<up-list @scrolltolower="scrolltolower" style="background-color: #eeebec;">
				<up-empty :iconSize="150" mode="list" text="当前暂无待办" v-if="todoList.length === 0"></up-empty>
				<up-list-item v-for="item in todoList" :key="item.assignorId">
					<view class="todo-list">
						<view class="todo-item">
							<view class="todo-content">
								<view class="todo-title">委托收款协议</view>
								<view class="todo-info">
									<view class="info-line">
										<text class="info-label">委托方：</text>
										<text class="info-value">{{ item.assignorName }}</text>
									</view>
									<view class="info-line">
										<text class="info-label">状态：</text>
										<text class="info-value status"
											:class="{ 'status-waiting': item.status === 'NOT_AUTH' }">
											{{ item.status === 'NOT_AUTH' ? '待签署' : item.status }}
										</text>
									</view>
									<view class="info-line">
										<text class="info-label">创建时间：</text>
										<text class="info-value">{{ item.createTime }}</text>
									</view>
								</view>
							</view>
							<view class="todo-action">
								<up-button v-if="item.status === 'NOT_AUTH'" @click="handleSign(item)" shape="circle"
									type="primary" :disabled="signing" :loading="signing" :text="signing ? '签署中' : '签署'"
									style="width: 100px;"></up-button>
							</view>
						</view>
					</view>
				</up-list-item>
				<LoadMore :status="status" v-if="todoList.length !== 0"></LoadMore>
			</up-list>
		</view>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted
} from "vue"
import {
	getAssignor,
	SignContract
} from '@/api/driver.js'
import {
	debounce
} from "@/utils/debounce.js"
import config from '@/config'


/* 数据 */
// 提示
const uToastRef = ref(null)
// tabs
const tabList = reactive([{
	name: '消息',
	id: 'news'
}, {
	name: '待办',
	id: 'todo',
	badge: {
		isDot: false // 使用红点
	}
}])
const activateTab = ref('news')
// 消息的三个分类
const newsItemList = reactive([{
	title: '业务进度提醒',
	img: '/static/images/icon/business_progress.png',
	value: "business_progress"
},
{
	title: '资金变动提醒',
	img: '/static/images/icon/change_funds.png',
	value: "change_funds"
},
{
	title: '账号资源提醒',
	img: '/static/images/icon/account_resources.png',
	value: "account_resources"
}
])
// 获取消息集合的分页参数
const getTodoListParams = reactive({
	currPage: 1,
	limit: 10
})
// 消息数组
const todoList = reactive([])
const status = ref('loadmore')
// 列表数据还有没有下一页
const hasNextPage = ref(false)
// 是否签署中
const signing = ref(false)




/* 函数 */
// tab点击
const clickTab = async (e) => {
	activateTab.value = e.id
	todoList.length = 0
	if (e.id === 'todo') {
		getTodoListParams.currPage = 1
		await getTodoList(getTodoListParams)
	}
}
// 获取信息列表
const getTodoList = async (params) => {
	uToastRef.value.show({
		type: 'loading',
		message: "加载中...",
		duration: -1
	})
	let res = await getAssignor(params)
	uToastRef.value.hide()
	if (res.success) {
		hasNextPage.value = res.data.hasNextPage
		if (!res.data.hasNextPage) {
			status.value = "nomore"
		} else {
			status.value = "loadmore"
		}
		todoList.push(...res.data.list)
		// 更新badge状态
		tabList[1].badge.isDot = res.data.list && res.data.list.length > 0
	}
}
// 跳转详情
const toNewsDetail = (type) => {
	uni.navigateTo({
		url: `/package_mine/pages/news/detail?type=${type}`
	})
}
// 触底刷新
const scrolltolower = async () => {
	if (hasNextPage.value) {
		status.value = "loading"
		getTodoListParams.currPage = getTodoListParams.currPage++
		await getTodoList(getTodoListParams)
	} else {
		status.value = "nomore"
	}
}
// 签署合同
const handleSign = (item) => {
	if (signing.value) return
	signing.value = true
	uToastRef.value.show({
		type: 'loading',
		message: "签署中...",
		duration: -1
	})
	let params = {
		assignorId: item.assignorId
	}
	debounce(() => {
		sign(params)
	})()
}
// 签署请求封装
const sign = async (params) => {
	let res = await SignContract(params)
	signing.value = false
	uToastRef.value.hide()
	if (res.success) {
		if (res.data.redirectUrl) {
			// const regex = /(\/APPServer\/.*)/
			// const url = res.data.shortUrl.match(regex) || res.data.shortUrl.match(/(\/H5Web\/.*)/)
			// const baseUrl = config.baseUrl
			// console.log(222222,url);
			
			// const redirectUrl = `${baseUrl}${url[1]}`
			// if (!url || !baseUrl || !redirectUrl) {
			// 	uToastRef.value.show({
			// 		type: 'error',
			// 		message: "地址解析错误"
			// 	})
			// 	return
			// }
			let redirectUrl = res.data.redirectUrl
			redirectUrl = redirectUrl.replace("?", "$")
			redirectUrl = redirectUrl.replace("=", "!")
			uni.navigateTo({
				url: `/package_mine/pages/news/webviewSigning?redirectUrl=${redirectUrl}`
			})
		} else {
			uToastRef.value.show({
				type: 'warning',
				message: "暂无跳转地址"
			})
		}
	}
}


/* 钩子 */
onMounted(() => {
	getTodoList(getTodoListParams)
})
</script>

<style lang="scss" scoped>
.news {
	min-height: 100vh;
	background-color: #fff;

	.news_list_part {
		padding: 10px;

		.news_list_head {
			padding: 10px;
			display: flex;
			justify-content: flex-end;
			color: #a1a1a1;
		}

		.news_list {
			.news_list_item {
				display: flex;
				padding: 10px;
				border-bottom: 1px solid #ccc;

				&:last-child {
					border-bottom: none;
				}

				.icon_part {
					height: 75px;
					aspect-ratio: 1/1;
					margin-right: 20px;

					>view {
						width: 100%;
						height: 100%;
					}

					image {
						width: inherit;
						height: inherit;
					}
				}

				.content_part {
					flex: 1;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding: 7px 0 2px;

					.title {
						font-weight: bold;
						font-size: 20px;
					}

					.content {
						.no_data {
							color: #8a8a8a;
							font-size: 18px;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
}

.todo-list {
	padding: 20rpx;
}

.todo-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	margin-bottom: 24rpx;
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
		opacity: 0.9;
	}
}

.todo-content {
	flex: 1;
}

.todo-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 20rpx;
}

.todo-info {
	.info-line {
		display: flex;
		margin-bottom: 12rpx;
		font-size: 28rpx;
		line-height: 1.4;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.info-label {
		color: #999;
		min-width: 140rpx;
	}

	.info-value {
		color: #666;
		flex: 1;
	}

	.status {
		&.status-waiting {
			color: #FF6A00;
			font-weight: 500;
		}
	}
}

.todo-action {
	margin-left: 30rpx;
}

.sign-btn {
	background: linear-gradient(90deg, #2979FF, #00B0FF);
	color: white;
	border: none;
	border-radius: 50rpx;
	padding: 0 40rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
	box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
	transition: all 0.3s;

	&:active {
		transform: scale(0.95);
		opacity: 0.9;
	}

	&[disabled] {
		background: #ccc;
		box-shadow: none;
	}
}
</style>